<template>
    <div ref="refTop" class="side-drawer row">
        
        <div ref="refBody" class="drawer-body column">
            <slot name="header"></slot>
            <slot>Drawer Body</slot>
        </div>

        <slot name="toolbar"></slot>

    </div>
</template>

<style scoped>
.side-drawer {
    height: 100%;
    position: absolute;
    top: 0px;
    z-index: 1010;
    pointer-events: none;
    align-items: flex-start;
}
.drawer-body {
    background-color: #fff;
    padding: 10px 10px 10px 10px ;
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
    pointer-events: auto;
    height: 100% ;
}

</style>

<script lang="ts" setup>
import { ref, onMounted, Ref, watch, withDefaults} from 'vue'


// const popout = ref(false)
// const width = ref(250)

const refBody = ref(null) as unknown as Ref<HTMLElement>
const refTop = ref(null) as unknown as Ref<HTMLElement>


let props = withDefaults(defineProps<{popout:boolean, width:number}>(), {
    popout: false, 
    width: 250
})

onMounted ( function() {
    $(refBody.value).outerWidth(props.width)
    $(refTop.value).css('left', -props.width)
})

watch(()=>props.popout, function (value:boolean) {
    if( value ) {
        $(refTop.value).stop().animate({
            left: 0
        }, 200, "swing")
    }
    else {
        $(refTop.value).stop().animate({
            left: - props.width
        }, 200, "swing")
    }
})

</script>